
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
  <script src="bootstrap/js/bootstrap.js"></script>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <!--    从后端获取数据-->
  <script>
    window.onload = function (){
      initData(1, 3)
    }
    function initData(page, size){
      $.ajax({
        url : 'allGoods',
        type: 'GET',
        data:{
          page: page, //页码
          size: size
        },
        dataType: 'text',
        //执行完毕的回调函数
        success: function (res){
          //为什么要转换，因为我们JSON放的是数据对象，想要通过对象，属性的方式拿到数据,就得把字符串转为对象
          let data = JSON.parse(res)
          if(data.code === 200){
            //拿到的数据
            let data_temp = data.data
            let totalPages = data.totalPages; // 获取总页数
            console.log("尾页数"+totalPages)
            console.log(data_temp)
            // 清空表格中的旧数据
            $("#td").empty();

            for (let i = 0; i < data_temp.length; i++){
              $("<tr><td>" + data_temp[i].id + "</td><td>" + data_temp[i].title
                      + "</td><td>" + data_temp[i].price + "</td><td>" + data_temp[i].descr + "</td>"
                      + "<td><img src='" + data_temp[i].image + "' alt='image' style='width: 50px;' /></td>"
                      + "<td>" +(data_temp[i].state==0?'可销售':'不可销售' ) + "</td><td>" + data_temp[i].mid + "</td>"
                      + "<td><button class='btn btn-primary'>编辑</button><button class='btn btn-success' onclick='delow("+ data_temp[i].id +","+page+ ")'>删除</button></td></tr>").appendTo($("#td"));
            }
            // 拼接分页按钮并插入到tfoot
            $("#tb tfoot td").html(
                    "<button class='btn btn-primary' onclick='initData(1, 3)'>首页</button>&nbsp;&nbsp;" +
                    "<button class='btn btn-primary' onclick='initData(" + (page - 1) + ", 3)'>上一页</button>&nbsp;&nbsp;" +
                    "<button class='btn btn-primary' onclick='initData(" + (page + 1) + ", 3)'>下一页</button>&nbsp;&nbsp;" +
                    "<button class='btn btn-primary' onclick='initData(" + totalPages + ", 3)'>尾页</button>&nbsp;&nbsp;"
            );

          }
        }
      })
    }
    //删除商品(变更为不可销售状态)
    function delow(id,page){
      let anw = window.confirm("你确定要删除这条数据吗？")
     // console.log("状态值",anw)
      if(anw){    //如果为真，点击的是确定按钮
        //删除数据，提交请求哥后端
        //console.log(id,page)
        $.ajax({
          url:'delGood',
          type: 'post',
          data: {
            id: id,
            page:page
          },
          dataType: 'text',
          success: function (res){
            console.log("返回数据",res);
            if(res == 'Y'){
              alert('数据删除成功')
              //删除成功后，回到原来的页码
              initData(page, 4);
            }else {
              alert('系统异常或数据已被其他人删除，刷新查看最新数据')
            }
          }
        })

      }else {
        return //程序暂停执行
      }
    }
  </script>

</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">商品搜索</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="请输入关键字" oninput="queryData(this.value)">
        </div>
        <button type="submit" class="btn btn-default">查询</button>
      </form>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<table class="table table-striped table-bordered table-hover" id="tb">
  <thead>
  <th>#</th>
  <th>商品名字</th>
  <th>商品价格</th>
  <th>商品描述</th>
  <th>图片</th>
  <th>状态</th>
  <th>商家</th>
  <th>操作</th>
  </thead>
  <tbody id="td">
  </tbody>
  <tfoot>
  <tr>
    <td colspan="11" style="text-align: center">
    </td>
  </tr>
  </tfoot>
</table>

</body>
</html>

<script>
  function queryData(keywords){
    if(keywords == ''){
      initData(1, 4)
    }
    $.ajax({
      url:"queryByCondition",
      type:'get',
      data:{
        keywords:keywords
      },
      dataType: 'text',
      success: function (res){
        //获取数据,JSON字符串
        let data = JSON.parse(res)
        if(data.code == 200){
          $("#td").empty();
          $("#tdbar").empty();
          let data_temp=data.data
          for (let i = 0; i < data_temp.length; i++){
            $("<tr><td>" + data_temp[i].id + "</td><td>" + data_temp[i].title
                    + "</td><td>" + data_temp[i].price + "</td><td>" + data_temp[i].descr + "</td>"
                    + "<td><img src='" + data_temp[i].image + "' alt='image' style='width: 50px;' /></td>"
                    + "<td>" + data_temp[i].state + "</td><td>" + data_temp[i].mid + "</td>"
                    + "<td><button class='btn btn-primary'>编辑</button><button class='btn btn-success' onclick='delow("+ data_temp[i].id + ")'>删除</button></td></tr>").appendTo($("#td"));
          }
          拼接分页按钮并插入到tfoot
          $("#tb tfoot td").html(
              "<button class='btn btn-primary' onclick='initData(1, 3)'>首页</button>&nbsp;&nbsp;" +
              "<button class='btn btn-primary' onclick='initData(" + (page - 1) + ", 3)'>上一页</button>&nbsp;&nbsp;" +
              "<button class='btn btn-primary' onclick='initData(" + (page + 1) + ", 3)'>下一页</button>&nbsp;&nbsp;" +
              "<button class='btn btn-primary' onclick='initData(" + totalPages + ", 3)'>尾页</button>&nbsp;&nbsp;"
          );
        }

      }
    })
  }
  // function  queryData(keywords){
  //   //console.log("keywords",keywords)
  //   $.ajax({
  //     url:"queryByCondition",
  //     type:'get',
  //     data:{
  //       keywords:keywords
  //     },
  //     dataType:'text',
  //     success:function (res){
  //       //console.log("查询的数据",res)
  //       let data = JSON.parse(res);
  //       if (data.code==200){
  //         $("#td").empty();
  //         $("#tdbar").empty();
  //         let data_temp=data.data
  //
  //       }
  //     }
  //   })
  // }
</script>